<template>
  <div class="hello">
    <n-space
      vertical
      :size="12"
    >
      <n-grid
        x-gap="12"
        :cols="4"
      >
        <n-gi>
          <n-input
            v-model:value="pattern"
            placeholder="搜索"
          />
          <n-tree
            :pattern="pattern"
            :data="data"
            v-model:selected-keys="value"
            block-line
            selectable
            default-expand-all
            :cancelable="false"
          />
        </n-gi>
        <n-gi :span="3">
          <n-grid
            x-gap="12"
            :cols="3"
          >
            <n-gi>
              <div class="green">{{value}}</div>
            </n-gi>
            <n-gi>
              <div class="light-green" />
            </n-gi>
            <n-gi>
              <div class="green" />
            </n-gi>
          </n-grid>
        </n-gi>
      </n-grid>

    </n-space>
  </div>
</template>



<script>
import { ref, reactive, watch } from "vue";

export default {
  name: "tree-search-view",
  props: {
    collectionName: String,
  },
  setup(props) {
    const readersNumber = ref(props.collectionName);
    const book = reactive({ title: "Vue 3 Guide" });
    const pattern = ref("");

    const value = ref("");
    watch(
      value,
      (newValue, oldValue) => {
        console.log(
          "---value:变更了：" +
            JSON.stringify(newValue) +
            "-----old:" +
            oldValue
        );
      },
      { immediate: true }
    );

    watch(
      pattern,
      (newValue, oldValue) => {
        console.log(
          "--搜索的 value:变更了：" +
            JSON.stringify(newValue) +
            "-----old:" +
            oldValue
        );

        
      },
      { immediate: true }
    );

    function createData(level = 4, baseKey = "") {
      if (!level) return void 0;
      return [0, 1].map((_, index) => {
        const key = "" + baseKey + level + index;
        return {
          label: createLabel(level),
          key,
          children: createData(level - 1, key),
        };
      });
    }

    //   disabled: true,

    function createLabel(level) {
      if (level === 4) return "道生一";
      if (level === 3) return "一生二";
      if (level === 2) return "二生三";
      if (level === 1) return "三生万物";
      return "";
    }
    // 暴露给 template
    return {
      readersNumber,
      createData,
      createLabel,
      book,
      value,
      data: createData(),
      pattern,
    };
  },
};

//   import { defineComponent, ref } from "vue";

// export default {
//   setup() {
//     return {
//     //   data: createData(),
//     //   pattern: ref("")
//     };
//   }
// }
</script>

<style scoped>
.light-green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.12);
}
.green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.24);
}
</style>
